<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol-tms-4326</title>
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
    <style>
        .map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<script>
    var url = 'http://localhost:18080/geoserver/gwc/service/tms/1.0.0/ly%3Abhqzhh_3201@EPSG%3A4326@png/';
    var type = 'shp'; // 根据你的需要设定类型
    var newUrl = url + '{z}/{x}/{y}.png';
    if (type == 'shp') {
        newUrl = url + '{z}/{x}/{-y}.png';
    }


    var projection = ol.proj.get('EPSG:4326');
    var extent = [-180, -90, 180, 90];
    var resolutions = [];
    for (var i = 0; i < 22; i++) {
        resolutions[i] = 0.703125 / Math.pow(2, i); // 计算分辨率
    }

    var tileGrid = new ol.tilegrid.TileGrid({
        extent: extent,
        resolutions: resolutions,
        tileSize: [256, 256]
    });

    var imgLayer = new ol.layer.Tile({
        // extent: mapExtent, // 如果需要限制图层的显示范围，可以取消注释
        source: new ol.source.XYZ({
            projection: projection,
            tileGrid: tileGrid,
            url: newUrl
        }),
        zIndex: 1
    });

    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM() // 添加一个OSM底图层
            }),
            imgLayer
        ],
        view: new ol.View({
            projection: projection,
            center: [118.796877, 32.060255], // 设置地图中心经纬度为南京
            zoom: 12, // 设置地图缩放级别
            maxZoom: 20,
            minZoom: 2,
            resolutions: resolutions // 设置视图的分辨率
        })
    });
</script>
</body>
</html>
